<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="author" content="Flying hormone" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="../css/media.css" />
        <link rel="stylesheet" href="../css/mui.min.css" />
        <link rel="stylesheet" href="../css/head_foot.css" />
        <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="../js/jquery.Query.js" ></script>
        <script type="text/javascript" src="../js/jquery-cookie.js"></script>
        <script type="text/javascript" src="../js/mui.min.js"></script>
        <script type="text/javascript" src="../js/appcan.js"></script>
        <script type="text/javascript" src="../js/appcan.control.js"></script>
        <script type="text/javascript" src="../js/common.js" ></script>
        <title>同城购</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
            }
            
            body {
                width: 100%;
                overflow-x: hidden;
                font-family: "微软雅黑";
                background: #fff;
                font-size: 1em;
                padding-bottom: 3.875em;
            }
            
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                font-weight: normal;
                margin: 0;
            }
            
            p {
                margin: 0;
                text-indent: 1.25em;
                background: #fff;
                padding: 0.625em 0;
                font-size: 1em;
                line-height: 1em;
                padding-top: 1.25em;
                color: #333;
            }
            
            input{ background: none; border: 1px solid;}
            input[type=text],input[type=tel],input[type=number]{ text-indent:0.5em;font-size: 1em; padding:0; margin:0; position:absolute; bottom:0; width:100%; height: 2.4em; line-height:3em; background: none; border: none;  }
            input[type=code]{text-indent:1em; font-size:1em; padding:0; margin:0; position:absolute; top:0; height:100%;  width:100%; background: none; border: none; }
            input[type=file]{ border-color: #ccc; display: none;}
            input[type=button]{ border-color: #ccc; display: none;}
            input[type="button"]{ background: none;}
            p,span{ font-size: 1em; color: #999;}
            label{ display:block; position:relative; color: #666; width: 100%; border-bottom: 1px solid #999; height: 3em; line-height: 4em; font-size: 1em;}
            label input{ display:inline; width: auto;}
            .login{
                width:80%;
                margin: 0 auto;
                margin-top: 25%;
            }
            .login p{
                width: 90%;
                margin: 0 auto;
                margin-top: 20%;
                background: #ff3366;
                color: #fff;
                border-radius: 0.2em;
                text-align: center;
                line-height: 2em;
                text-indent: 0;
                padding: 0.4em 0;
            }
            .login a{
                display: block;
                position:absolute;
                right:0;
                bottom:0.2em;
                color: #ff3366;
                font-size: 1em;
                line-height: 1.2em;
                text-align: center;
                border: 1px solid #ff3366;
                padding: 0.1em 0.3em;
            }
        </style>
    </head>

    <body>
        <header>
            <a><span class="leftleft"></span></a>
            <h1 id="title">注册</h1>
        </header>
        <section class="login">
            <form>
                <div>
                    <label>手机号<input type="number" class="username" name="userName" id="username" value="" autofocus/><a id="setCode" class="setCode">发送验证码</a></label>
                    <label>验证码<input type="text" class="code" name="code" id="code" value="" /></label>
                </div>
                <div>
                    <p class="btn">下一步</p>
                </div>
            </form>
        </section>
        <script>
            var codeTime = 0;
            $(function(){
                //验证码
                $("#setCode").click(function(){
                    if(codeTime>0){
                        $(".setCode").attr('id','');
                        return false;
                    }
                    if(!!!$(".username").val()){
                        alert("请输入手机号码");
                        return false;
                    }
                    appcan.ajax({
                        type:"get",
                        url:host+"/sendMsg.json?mobile="+$("#username").val()+"&tempCode=SMS_47880147",
                        dataType:"json",
                        contentType: "application/json",
                        success : function(dataResult) {
                            if(dataResult.status==1){
                                codeTime = 60;
                                settime(codeTime);
                                var code= dataResult.data;
                                appcan.locStorage.setVal("code",code);
                            }else{
                                alert("发送失败，请输入正确的手机号码！");
                            }
                        }
                    })
                    
                })
                
                // 下一步
                $(".btn").click(function(){
                    codeTime = 0;
                    appcan.locStorage.getVal("code");
                    if(!!!$(".username").val()){
                        alert("输入手机号码");
                        return false;
                    }
                    if(!!!$(".code").val()){
                        alert("输入验证码");
                        return false;
                    }
                    if($(".code").val()!=appcan.locStorage.getVal("code")){
                        alert("验证码有误");
                        return false;
                    }
                    openUrl("register2.html?username="+$(".username").val(),"register2");
                })
            })
            // 倒计时
           function settime() { 
                if (codeTime == 0) {
                    $(".setCode").attr("id","setCode");
                    $(".setCode").html("发送验证码");
                } else { 
                    $(".setCode").attr("id","");
                    $(".setCode").html(codeTime+"后重新发送");
                    codeTime--; 
                    setTimeout(function() { 
                        settime(); 
                    },1000) 
                } 
            } 
        </script>
    </body>

</html>